<template>
  <div class="main">
    <el-descriptions direction="vertical" :column="4" border>
      <el-descriptions-item
        label="用户名称"
        label-align="center"
        align="center"
      >
        {{ info.username }}
      </el-descriptions-item>
      <el-descriptions-item
        label="积分余额"
        label-align="center"
        align="center"
      >
        {{ info.balance }}
      </el-descriptions-item>
      <el-descriptions-item
        label="消费总额"
        label-align="center"
        align="center"
      >
        {{ info.consumeTotal }}
      </el-descriptions-item>
      <el-descriptions-item
        label="充值总额"
        label-align="center"
        align="center"
      >
        {{ info.rechargeTotal }}
      </el-descriptions-item>
    </el-descriptions>
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pt-[12px] overflow-auto"
    >
      <el-form-item label="记录类型" prop="type">
        <el-select
          v-model="form.type"
          placeholder="请选择"
          clearable
          class="!w-[150px]"
        >
          <el-option
            v-for="it in RECORD_TYPE_LIST"
            :key="it.value"
            :value="it.value"
            :label="it.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序方式" prop="sort">
        <el-select
          v-model="form.sort"
          placeholder="请选择"
          clearable
          class="!w-[150px]"
        >
          <el-option value="DESC" label="时间降序" />
          <el-option value="ASC" label="时间升序" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期类型" prop="timeUnit">
        <el-select
          v-model="form.timeUnit"
          placeholder="请选择"
          clearable
          class="!w-[150px]"
        >
          <el-option value="DAY" label="日" />
          <el-option value="WEEK" label="周" />
          <el-option value="MONTH" label="月" />
          <el-option value="YEAR" label="年" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期范围" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          class="!w-[260px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      show-overflow-tooltip
      stripe
      border
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="orderNo" label="订单编号" width="260" />
      <el-table-column prop="type" label="类型" width="120" />
      <el-table-column prop="beforeBalance" label="变化前" width="160" />
      <el-table-column prop="afterBalance" label="变化后" width="160" />
      <el-table-column prop="amount" label="变化量" width="160" />
      <el-table-column prop="taskStatus" label="状态" width="100" />
      <el-table-column prop="description" label="变化描述" />
      <el-table-column
        prop="createTime"
        :formatter="val => handleAutoUTC8(val.createTime)"
        label="创建时间"
      />
      <el-table-column
        prop="updateTime"
        :formatter="val => handleAutoUTC8(val.updateTime)"
        label="更新时间"
      />
    </el-table>
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 40, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { handleAutoUTC8 } from "@/utils/tools";
import { reactive, ref, onMounted, watch } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import { getUserPointsRecords, getUserPointsStats } from "@/api/userPointApi";
import { RECORD_TYPE_LIST } from "@/utils/constant";

type Info = {
  balance: number;
  consumeTotal: number;
  rechargeTotal: number;
  username: string;
};
const info = ref<Info>({
  balance: 0,
  consumeTotal: 0,
  rechargeTotal: 0,
  username: ""
});
const queryUserStats = async () => {
  try {
    const { data } = await getUserPointsStats();
    info.value = data;
  } catch (error) {
    console.log(error);
  }
};
const formRef = ref();
const loading = ref(false);
const form = reactive({
  time: "",
  type: "",
  sort: "",
  timeUnit: "",
  startDate: "",
  endDate: ""
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
});
const tableData = ref([]);

watch(
  () => form.time,
  (newVal, oldVal) => {
    if (newVal) {
      form.startDate = newVal[0];
      form.endDate = newVal[1];
    } else {
      form.startDate = "";
      form.endDate = "";
    }
  }
);

async function onSearch() {
  const { time, ...reset } = form;
  const params = {
    page: pagination.currentPage,
    size: pagination.pageSize,
    ...reset
  };
  const { data } = await getUserPointsRecords(params);
  const { records, total, size, current } = data;
  tableData.value = records;
  pagination.total = total;
  pagination.pageSize = size;
  pagination.currentPage = current;
}
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  onSearch();
};
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  onSearch();
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  form.startDate = "";
  form.endDate = "";
  pagination.currentPage = 1;
  onSearch();
};
onMounted(() => {
  queryUserStats();
  onSearch();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
  }
}
</style>
